import * as React from 'react';
import { Box } from 'ticket-ui';
import SwitchImg from './switch.svg';
import './index.module.scss';

interface JourneyProps {
  from: string;
  to: string;
  exchangeFromTo: () => void;
  showCitySelector: (city: { show: boolean; currentDir: string }) => void;
}

export default function Journey(props: JourneyProps) {
  const { from, to, exchangeFromTo, showCitySelector } = props;

  return (
    <Box styleName="journey" data={[2]}>
      <div
        styleName="journey-station"
        onClick={() =>
          showCitySelector({
            show: true,
            currentDir: 'left',
          })
        }
      >
        <input
          type="text"
          readOnly
          name="from"
          value={from}
          styleName="journey-input journey-from"
        />
      </div>
      <div styleName="journey-switch" onClick={() => exchangeFromTo()}>
        <SwitchImg />
      </div>
      <div
        styleName="journey-station"
        onClick={() =>
          showCitySelector({
            show: true,
            currentDir: 'right',
          })
        }
      >
        <input
          type="text"
          readOnly
          name="to"
          value={to}
          styleName="journey-input journey-to"
        />
      </div>
    </Box>
  );
}
